<template>
  <WsmTable
    ref="table"
    v-model="queryFormType"
    load-url="/rbac-server/rbac/loginsession/page"
    :query-type="queryFormType"
    :convert="convert"
    :change-load="true"
  >
    <template #title>{{ t('rbac.loginSession.title') }}</template>
    <template #query="{ data }">
      <el-form-item :label="t('rbac.loginSession.sessionState')">
        <el-radio-group v-model="data.sessionState.value">
          <el-radio value="">{{ t('rbac.loginSession.all') }}</el-radio>
          <el-radio value="0">{{ t('rbac.loginSession.sessionStateOnline') }}</el-radio>
          <el-radio value="1">{{ t('rbac.loginSession.sessionStateOffline') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="t('rbac.loginSession.loginState')">
        <el-radio-group v-model="data.loginState.value">
          <el-radio value="">{{ t('rbac.loginSession.all') }}</el-radio>
          <el-radio value="0">{{ t('rbac.loginSession.loginStateOnline') }}</el-radio>
          <el-radio value="1">{{ t('rbac.loginSession.loginStateClose') }}</el-radio>
          <el-radio value="2">{{ t('rbac.loginSession.loginStateRepeat') }}</el-radio>
          <el-radio value="3">{{ t('rbac.loginSession.loginStateForce') }}</el-radio>
          <el-radio value="4">{{ t('rbac.loginSession.loginStateExpire') }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <template #button="{ row }">
      <template v-if="row">
        <el-button
          v-hasPermi="'close'"
          v-if="row.sessionState == 0"
          @click="close(row.id)"
          type="danger"
          >{{ t('common.close') }}</el-button
        >
      </template>
    </template>
    <template #column>
      <el-table-column prop="sessionState" :label="t('rbac.loginSession.sessionState')" width="90">
        <template #default="scope">
          <template v-if="scope.row.sessionState == 0">
            <el-tag effect="dark" type="success">{{
              t('rbac.loginSession.sessionStateOnline')
            }}</el-tag>
          </template>
          <template v-else>
            <el-tag effect="dark" type="danger">{{
              t('rbac.loginSession.sessionStateOffline')
            }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="loginState"
        :label="t('rbac.loginSession.loginState')"
        width="100"
        align="center"
      >
        <template #default="scope">
          <template v-if="scope.row.loginState == 0">
            <el-tag effect="light" type="success">{{
              t('rbac.loginSession.loginStateOnline')
            }}</el-tag>
          </template>
          <template v-else-if="scope.row.loginState == 1">
            <el-tag effect="light" type="info">{{ t('rbac.loginSession.loginStateClose') }}</el-tag>
          </template>
          <template v-else-if="scope.row.loginState == 2">
            <el-tag effect="light" type="warning">{{
              t('rbac.loginSession.loginStateRepeat')
            }}</el-tag>
          </template>
          <template v-else-if="scope.row.loginState == 3">
            <el-tag effect="light" type="danger">{{
              t('rbac.loginSession.loginStateForce')
            }}</el-tag>
          </template>
          <template v-else-if="scope.row.loginState == 4">
            <el-tag effect="light" type="info">{{
              t('rbac.loginSession.loginStateExpire')
            }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="loginName" :label="t('rbac.loginSession.loginName')" width="180" />
      <el-table-column prop="userName" :label="t('rbac.loginSession.userName')" width="120" />
      <el-table-column prop="orgName" :label="t('rbac.loginSession.orgName')" />
      <el-table-column prop="loginIp" :label="t('rbac.loginSession.loginIp')" width="120" />
      <el-table-column prop="loginIps" :label="t('rbac.loginSession.loginIps')" width="250" />
      <el-table-column prop="loginTime" :label="t('rbac.loginSession.loginTime')" width="170" />
      <el-table-column
        prop="loginOutTime"
        :label="t('rbac.loginSession.loginOutTime')"
        width="170"
      />
    </template>
  </WsmTable>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import {
  ConvertType,
  OrgConvertType,
  QueryFormType,
  QueryType
} from '@/components/WsmTable/src/types'
import { closeApi } from '@/api/rbac/loginsession'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'

const { t } = useI18n()

//表格对象
const table = ref()

//查询定义
const queryFormType: QueryFormType = {
  sessionState: {
    value: '',
    queryType: QueryType.EQ
  },
  loginState: {
    value: '',
    queryType: QueryType.EQ
  }
}

const convert: ConvertType = {
  orgConvert: [
    {
      name: 'orgId',
      type: OrgConvertType.ORG_SHORT_NAME,
      rename: 'orgName'
    }
  ],
  dateFormat: [
    { name: 'loginTime', format: 'yyyy-MM-dd HH:mm:ss' },
    { name: 'loginOutTime', format: 'yyyy-MM-dd HH:mm:ss' }
  ]
}

const close = async (id: string) => {
  ElMessageBox.confirm(t('common.closeMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await closeApi(id)
    if (rs.success) {
      table.value.load(1)
    }
  })
}
</script>

<style scoped></style>
